<template>
  <div class="old-staff-list-container" :style="styleData">
    <!-- 标题 -->
    <div class="old-staff-list-title">{{ title }}</div>
    <!-- 主体内容 -->
    <div class="old-staff-list-content">
      <!-- 列表表头 -->
      <div class="content-header">
        <div class="content-header-title">姓名</div>
        <div class="content-header-title">部门</div>
      </div>
      <!-- 列表展示 -->
      <div class="content-list">
        <div class="list-item" v-for="item in oldStaffList">
          <span class="item">{{ item.userName }}</span>
          <span
            class="item"
            v-bind:class="[{ danger: item.department ? false : true }]"
            >{{ item.department || "暂未分配部门" }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string;
  oldStaffList: [];
  styleData: object;
}
const props = withDefaults(defineProps<Props>(), {
  title: "",
  oldStaffList: [],
  styleData: {}
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
